<script setup>
// import { course } from '@/api/test.js'
// import { onMounted, ref } from 'vue'
// const tableData = ref([])
// onMounted(async () => {
//   // course().then((res) => {
//   //   tableData.value = res.data
//   //   console.log(res)
//   // })
//   const res = await course()
//   console.log(res)
//   tableData.value = res.data
//   console.log(tableData.value)
// })
import { Search, Plus } from '@element-plus/icons-vue'
</script>
<template>
  <div id="professor-course">
    <div>
      <el-button
        type="primary"
        round
        :icon="Plus"
        style="box-shadow: 0.125rem 0.125rem 0.125rem #ccc; margin-left: 1.875rem"
      >
        新建课程
      </el-button>
      <el-input
        placeholder="请输入内容"
        :prefix-icon="Search"
        v-model="input1"
        style="width: 12.5rem; margin-left: 46.875rem"
      ></el-input>
    </div>
    <div style="margin-top: 1.875rem">
      <el-empty description="暂无课程" />
    </div>
  </div>
</template>
<style lang="scss" scoped>
#professor-course {
  padding-bottom: 8.75rem;
  height: 100vh;
}
h5 {
  margin: 0rem;
  padding: 0.3125rem;
  font-size: 1.0625rem;
  color: black;
  cursor: pointer;
}
h5:hover {
  color: cornflowerblue;
}
h3 {
  margin: 0;
  padding: 0.625rem;
}

li {
  margin-bottom: 1.25rem;
  display: inline-block;
  flex-wrap: wrap;
  padding-right: 1.5625rem;
  padding-left: 1.5625rem;
  width: 17.5rem;
}

img:hover {
  cursor: pointer;
}
h3:hover {
  cursor: pointer;
  color: cornflowerblue;
}
span {
  position: absolute;
  margin-top: -11.5rem;
  padding: 0.625rem;
  color: white;
  border-radius: 0.1875rem;
  background-color: cornflowerblue;
  height: 2.3125rem;
}
</style>
